<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成达大屏监控系统 - 风格选择</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .selector-container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border-radius: 2rem;
            padding: 3rem;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.2);
            max-width: 800px;
            width: 90%;
        }

        .header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .logo {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border-radius: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 2rem;
            box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
        }

        .title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            background: linear-gradient(135deg, #ffffff, #e0e7ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .subtitle {
            font-size: 1.125rem;
            color: rgba(255, 255, 255, 0.7);
            font-weight: 400;
        }

        .styles-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .style-card {
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 1.5rem;
            padding: 2rem;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .style-card:hover {
            transform: translateY(-8px);
            border-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }

        .style-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #6366f1, #8b5cf6);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .style-card:hover::before {
            transform: scaleX(1);
        }

        .style-preview {
            width: 100%;
            height: 120px;
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            border-radius: 1rem;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: rgba(255, 255, 255, 0.3);
            position: relative;
            overflow: hidden;
        }

        .style-card.modern .style-preview {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .style-preview::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            animation: shimmer 3s infinite;
        }

        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        .style-info h3 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .style-info .icon {
            width: 32px;
            height: 32px;
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
        }

        .style-card.classic .icon {
            background: rgba(52, 152, 219, 0.2);
            color: #3498db;
        }

        .style-card.modern .icon {
            background: rgba(99, 102, 241, 0.2);
            color: #6366f1;
        }

        .style-info p {
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }

        .style-features {
            list-style: none;
            margin-bottom: 1.5rem;
        }

        .style-features li {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.875rem;
        }

        .style-features li i {
            color: #10b981;
            font-size: 0.75rem;
        }

        .select-btn {
            width: 100%;
            padding: 0.875rem 1.5rem;
            border: none;
            border-radius: 0.75rem;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .style-card.classic .select-btn {
            background: #3498db;
            color: white;
        }

        .style-card.classic .select-btn:hover {
            background: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
        }

        .style-card.modern .select-btn {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: white;
        }

        .style-card.modern .select-btn:hover {
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
        }

        .footer {
            text-align: center;
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.875rem;
        }

        .loading {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 1rem;
        }

        .loading-spinner {
            width: 60px;
            height: 60px;
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-top: 4px solid #6366f1;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .loading-text {
            color: white;
            font-size: 1.125rem;
            font-weight: 500;
        }

        @media (max-width: 768px) {
            .selector-container {
                padding: 2rem;
                margin: 1rem;
            }

            .title {
                font-size: 2rem;
            }

            .styles-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="selector-container">
        <div class="header">
            <div class="logo">
                <i class="fas fa-chart-line"></i>
            </div>
            <h1 class="title">成达大屏监控系统</h1>
            <p class="subtitle">选择您喜欢的界面风格</p>
        </div>

        <div class="styles-grid">
            <!-- 经典风格 -->
            <div class="style-card classic" onclick="selectStyle('classic')">
                <div class="style-preview">
                    <i class="fas fa-industry"></i>
                </div>
                <div class="style-info">
                    <h3>
                        <div class="icon">
                            <i class="fas fa-palette"></i>
                        </div>
                        经典风格
                    </h3>
                    <p>传统的蓝色主题界面，简洁大方，适合长时间监控使用。</p>
                    <ul class="style-features">
                        <li><i class="fas fa-check"></i> 传统蓝色主题</li>
                        <li><i class="fas fa-check"></i> 简洁的表格布局</li>
                        <li><i class="fas fa-check"></i> 稳定的性能表现</li>
                        <li><i class="fas fa-check"></i> 兼容性好</li>
                    </ul>
                    <button class="select-btn">
                        <i class="fas fa-arrow-right"></i>
                        选择经典风格
                    </button>
                </div>
            </div>

            <!-- 现代风格 -->
            <div class="style-card modern" onclick="selectStyle('modern')">
                <div class="style-preview">
                    <i class="fas fa-rocket"></i>
                </div>
                <div class="style-info">
                    <h3>
                        <div class="icon">
                            <i class="fas fa-magic"></i>
                        </div>
                        现代风格
                    </h3>
                    <p>现代化的渐变主题界面，视觉效果更佳，用户体验更优。</p>
                    <ul class="style-features">
                        <li><i class="fas fa-check"></i> 现代化渐变背景</li>
                        <li><i class="fas fa-check"></i> 丰富的动画效果</li>
                        <li><i class="fas fa-check"></i> 实时状态监控</li>
                        <li><i class="fas fa-check"></i> 响应式设计</li>
                    </ul>
                    <button class="select-btn">
                        <i class="fas fa-arrow-right"></i>
                        选择现代风格
                    </button>
                </div>
            </div>
        </div>

        <div class="footer">
            <p>© 2025 成达科技 - 大屏监控系统 v2.0</p>
        </div>
    </div>

    <!-- 加载动画 -->
    <div class="loading" id="loading">
        <div class="loading-spinner"></div>
        <div class="loading-text">正在加载界面...</div>
    </div>

    <script>
        function selectStyle(style) {
            const loading = document.getElementById('loading');
            loading.style.display = 'flex';
            
            // 添加点击动画效果
            const card = event.currentTarget;
            card.style.transform = 'scale(0.95)';
            
            setTimeout(() => {
                card.style.transform = 'scale(1)';
                
                // 获取当前页面的基础路径
                const basePath = window.location.pathname.replace('/selector.html', '');
                
                // 根据选择的风格跳转到对应页面
                if (style === 'classic') {
                    window.location.href = basePath + '/index.html';
                } else if (style === 'modern') {
                    window.location.href = basePath + '/modern.html';
                }
            }, 150);
        }

        // 添加键盘支持
        document.addEventListener('keydown', (e) => {
            if (e.key === '1') {
                selectStyle('classic');
            } else if (e.key === '2') {
                selectStyle('modern');
            }
        });

        // 添加鼠标悬停效果
        document.querySelectorAll('.style-card').forEach(card => {
            card.addEventListener('mouseenter', () => {
                card.style.transform = 'translateY(-8px) scale(1.02)';
            });
            
            card.addEventListener('mouseleave', () => {
                card.style.transform = 'translateY(0) scale(1)';
            });
        });

        // 页面加载完成后的动画
        document.addEventListener('DOMContentLoaded', () => {
            const cards = document.querySelectorAll('.style-card');
            cards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(30px)';
                
                setTimeout(() => {
                    card.style.transition = 'all 0.6s ease';
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, index * 200);
            });
        });
    </script>
</body>
</html>
